/*
  Theme Name: Robinu Theme
  URI: http://sheshui.me/
  Version: 2.0
  Author: Robin L. info@sheshui.net
  Description: Responsive Web Design
*/
*,*:after,*::before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  overflow: hidden;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Reset by http://meyerweb.com/eric/tools/css/reset/ [v2.0 | 20110126 License: none (public domain)] */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}
span.caps{font-size: 1em;}
sub, sup{font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sub a, sup a{color: #428bca;text-decoration: none;}
sup{top: -.5em;}
sub{bottom:-.5em;}
/*
::-webkit-scrollbar-track-piece {background-color:#f5f5f5;	border-left:1px solid #D2D2D2;}
::-webkit-scrollbar {width:10px;height:10px;}
::-webkit-scrollbar-thumb {background-color:#c2c2c2;	background-clip:padding-box;border:1px solid #C1C1C1;	min-height:28px;}
::-webkit-scrollbar-thumb:hover {border:1px solid #C1C1C1;	background-color:#B1B1B1;}
*/
/* Global Style by Sheshui.Me 20110726 */
html, body,div,
h1, h2, h3, h4, h5, h6,
li, blockquote, p, span,
form, filedset, input, select, textarea{color:#444444; font:normal 13px/1.5 'Lucida Grande', Lucida Sans Unicode, Hiragino Sans GB, WenQuanYi Micro Hei,'Helvetica Neue', Helvetica,Verdana,Tahoma,Arial,sans-serif; outline:none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
body{overflow-y: scroll;background: #FFFFFF;}
ul, ol, li{list-style:none;}
li strong, blockquote strong{font-weight:bold;}
a{text-decoration:none; color:#333333; cursor:pointer; outline:none;}
a img{outline:none;}
a:hover span,
a:hover,a:focus{text-decoration:underline; color:#2196F3;}
a:focus,a:active{text-decoration:none;}
.clearfix{ clear:both; float:none; font-size:1px; height:0; line-height:0; }
.clearfloat:after{content:''; display:block; clear:both;}
input[type=text],textarea {border-width: 1px; border-style: solid; border-color:#DDDDDD #E4E4E4 #E4E4E4 #DDDDDD;height:auto; padding:.5em; vertical-align: middle; outline:none; resize: none;}
.hidden{display:none;}
.en{color:#999999; font-size:11px; font-weight:normal; line-height:1em;}
.hamburger-button, 
.search-button, 
.search-close-button{background: transparent center center no-repeat;background-size: 24px 24px;border: 0;display: block;height: 48px;overflow: hidden;width: 64px;margin: 0; padding: 0;position: relative;z-index: 99;float:left;outline: none;}
.hamburger-button{height: 64px;float: right;}
.hamburger-button:hover{color:#2196F3;cursor: pointer;}
/* Layout */
.page{background-color:#f5f5f5;}
.top, .main, .bottom{ clear:both;width:100%}
.top header,
.main{flex-grow: 1;}
.main{ max-width: 800px;min-height: 780px; margin: 0 auto; padding:84px 0 0 0;}
.top .avatar{background: url(../images/avatar240_240.jpg) scroll center center #FFFFFF;background-size: cover;border-radius: 50%; overflow: hidden;}
.bottom footer { margin:0 auto; }
.main section {min-width: 720px; margin: 0 auto; }
.side {position: fixed; height:100%;width: 260px;right:0; top:0;z-index: 999;border-left: 1px solid #e4e4e4;background: #FFF}
.side img {max-width: 260px;}
.side aside {overflow:hidden;width:260px; height: 100%; padding:0; background:rgba(255,255,255,1);}
.side aside .side-inner{overflow-y: auto;height:calc(100% - 65px);}
.one-column .main{background-image:none;}
.one-column .main section{background-image:none;}
.one-column .main article{}

.grid-three-layout, .grid-four-layout{overflow:hidden; margin:10px 0;}
.grid-three-layout .block,.grid-four-layout .block{display:inline; float:left; padding:0 16px; }
.grid-four-layout .block{width:240px;}
.grid-three-layout .block h2, .grid-four-layout .block h2{margin-bottom:5px; font-size:18px;}
.grid-three-layout .block ul, .grid-four-layout .block ul{margin-left:0;}
.grid-three-layout .block li, .grid-four-layout .block li{overflow:hidden; padding:5px 0 5px 10px;  margin:0;font-size: 13px; line-height: 1.2;}
.grid-three-layout .block li a, .grid-four-layout .block li a{text-decoration:none;}
.grid-three-layout .block li a, .grid-four-layout .block li .time{float:right; font-size:.8em; line-height: 1.8em;color:#999}
.grid-three-layout .first, .grid-four-layout .first{padding-left:0;}
.grid-three-layout .last, .grid-four-layout .last{padding-right:0;border-right: 0 none;}
/*LeftBar*/
.leftbar{position:fixed;top:0;left:0;}
/* Top */
.top{
  position: fixed;
  top: 0;
  z-index: 9;
  background-color:#FFFFFF;
  /*background-image: -moz-linear-gradient(top, #f8f8f8, #f2f2f2); 
  background: -o-linear-gradient(top, #f8f8f8 0%,#f2f2f2 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f8f8f8), color-stop(1,#f2f2f2)); */
  box-shadow: 0 0px 2px rgba(0,0,0,0.14);
  -webkit-transition: top 1s ease, left 1s ease;
  -moz-transition: top 1s ease, left 1s ease;
  -o-transition: top 1s ease, left 1s ease;
  -ms-transition: top 1s ease, left 1s ease;
}
/*.top.fadeout{  top:-70px;  -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
.top.fadeout .hamburger-button{position: fixed; top: 0;}*/
.top .avatar{margin: 0;float: left; display: none;}
/* Bottom */
.bottom{
  border-top:3px solid rgba(33,150,243,1);
  background-color:#FFFFFF;
}
footer{width: 880px; /*height: 144px;*/min-height: 64px;position: relative;}
footer h2{font-size:14px; font-weight:bold; margin-bottom:2px;}
footer li{padding: 0.2em 0 0.2em 10px; background: url(../images/dot.gif) no-repeat scroll 2px 9px transparent;}
.footer-left{float:left; width:720px; padding: 0;}
.footer-left nav{padding:10px 5px; background:rgba(255,255,255,0.7);box-shadow:0 1px 2px rgba(198,198,198,0.5)}
.footer-left nav a{padding:2px 5px;}
.footer-left nav a span{padding-left:2px;}
.footer-left .box{float:left; width:240px; padding: 0 10px 0 0;margin-bottom:10px;}
.footer-left .first{width:100px;}
footer .mission, footer .copyright{top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    margin: 0 20px;
    position: absolute;}
footer .mission p{color:#D4D4D4; font-size:16px;}
footer .copyright{right:0;}
.footer-right{float:right;padding: 0; text-shadow: -1px -1px 1px #FFF;}
.footer-right p, .footer-right a, .footer-right span{font-size:11px; color:#999999; /*text-shadow: 1px 1px 1px #FFF;*/}
/* Common Rules */
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}
.float-left{float:left; padding-right:1em;}
.float-right{float:right; padding-left:1em;}
.float-left img, .float-right img{}
.coming{height:360px; padding-top:100px;}
.coming img{ display:block; margin:0 auto;}
.coming p{color:#999999; padding:20px 0; font:18px 'Microsoft Yahei'; text-align:center;}
.hline{clear:both; margin: 20px auto;height:20px; font-size:1px; line-height:1;border:none; background: url(../images/hline.gif) no-repeat scroll center center transparent;}
.published-time{color:#999999; font-size:11px; padding:0 15px;}

/* Header */
header {height: 64px;/*background-image:linear-gradient(-180deg,#fff 0,#eee 100%)*/}
header .page-title{float:left;  padding:0 1em 0 1em; /*border-right: solid 1px rgba(160, 160, 160, 0.3);*/ text-align:left; position:relative; }
header .page-title,
header .page-title a {font:normal 16px/64px 'Helvetica Neue Light','Helvetica Neue',"Microsoft YaHei",Helvetica,Tahoma,Arial,sans-serif; letter-spacing: .2em;white-space: nowrap;}
header .page-title a:hover{text-decoration:none;}
header nav.mainnav{position:relative; float: left; padding:0px 32px 0 0;height:60px;}
header nav.mainnav ul{height:60px;}
header nav.mainnav li { display:inline; float:left; padding: 0; /*border-left: 1px solid #E4E4E4; border-right: 1px solid #F2F2F2;*/ }
header nav.mainnav a { float:left; color:#000000; padding:0px 20px; height:64px;text-align:center; font:normal 16px/64px 'Lucida Grande', Lucida Sans Unicode, Hiragino Sans GB, WenQuanYi Micro Hei,'Helvetica Neue', Helvetica,Verdana,Tahoma,Arial,sans-serif;-webkit-box-sizing: initial;-moz-box-sizing: initial;box-sizing: initial;
}
header nav.mainnav .active a,
header nav.mainnav a:hover,header nav a:focus {height:62px;  text-decoration:none; outline:0 none; }
header nav.mainnav a:hover{color:#0D47A1}
header nav.mainnav .active a{color:#999999}
nav.mainnav  li{padding:0.2em 0;}
header nav.mainnav .active{position:relative;}
header nav.mainnav .active:after{position: absolute;left: 50%;top: -2px;border: 10px solid transparent;content: " ";height: 0;width: 0; margin-left:-10px; pointer-events: none; /*border-top-color: #FF7700;*/}
header nav.mainnav .link-studio,header nav.mainnav .link-studio:hover{position: absolute;
  top: 15px;
  right: 0;
  background-color: #F2F2F2;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  border-radius: 3px;
  border: 1px solid #CCCCCC;
  color: #999999;
  font-size:13px;
  font-family: 'Helvetica Neue',Helvetica,Tahoma,Arial,sans-serif
}
header .mainmenu{ float: right;}
header .mainmenu .search{ float: left;  height: 64px;}
header .mainmenu .search a{padding:0 20px;display: block;float: left;line-height: 64px;}
header .mainmenu .search i{margin-top: 20px;}
header nav.mainnav .link-studio:hover{color:#666666;}
header #searchform input {
  display: inline-block;
  height: 2.5em;
  position: relative;
  vertical-align: middle;
  border: 1px solid #2196F3;
}
header #searchform {
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  margin-top: 16px;
  white-space: nowrap;
}
header #searchform input {width: 30em;}
header #searchform.visible {max-width: 35em;opacity: 1;padding: 0 1em 0 0;}

header .search{float:left;;}
/*header .search .inputtext{height:42px;width: 30em;}
header .search input.btn{height:42px;background-color: #FFFFFF;border:1px solid #e4e4e4;margin-left:-1px;vertical-align:middle;}*/
.breadcrumb {margin: 0 auto; height:30px;line-height:30px;font-size:.9em;}
.breadcrumb, .breadcrumb a{color:#FFFFFF}

.pager-nav{clear:both; overflow: hidden;margin: 0 0 20px;background-color: #FFFFFF;}
.pager-nav strong{font-weight:bold; color:#666666; }
.pager-nav p {margin: 0; width:50%; font-size:16px; color:#333333; line-height:1.5em; background-color: #FFFFFF; padding:30px 15px; /*box-shadow:0 0 2px rgba(198,198,198,0.5);*/-webkit-transition: top 1s ease, left 1s ease;-moz-transition: top 1s ease, left 1s ease;-o-transition: top 1s ease, left 1s ease;-ms-transition: top 1s ease, left 1s ease;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.pager-nav p.prev{float: left;background-color: #FFFFFF;text-align: left;}
.pager-nav p.next{float: right;background-color: #FFFFFF; text-align: right;}
.pager-nav p .material-icons {color:#333333; vertical-align: bottom;}
.pager-nav a:hover,
.pager-nav a:hover p,
.pager-nav a:hover p .material-icons{color:#2196F3;text-decoration:none; }

.sub-nav{height:35px; background-color: rgba(255,255,255,0.86); margin-bottom: 10px; box-shadow:0 1px 2px rgba(198,198,198,0.5); overflow: hidden; padding-right: 50px; position: relative;}
.sub-nav li{display:inline; float:left; height:35px; line-height:35px;  margin:0px 1px 0 0; padding:0; }
.sub-nav a{float:left; color:#333333;padding:0 12px; height:35px; line-height:35px;outline:none;}
.sub-nav .active a,
.sub-nav a:hover{text-decoration:none; color:#FFFFFF; background-color:#4D4D4D; }
.sub-nav .more{float: right; position: absolute; right: 10px; cursor: pointer;}

/* Error 503 on lib/txplib_db.php */
.error503{}

/* Contact block */
.contact-block{}
.contact-block legend{display:none;}
.contact-block input,.contact-block textarea {width:100%;}
.contact-block .zemError{padding:5px;border:1px solid #FF7700;margin:10px 0; }
.contact-block .zemError li{padding: 0.2em 0 0.2em 10px;background: url(../images/dot.gif) no-repeat scroll 2px 9px transparent; border:0 none; margin:0;}

.meta {margin-bottom: 1em;border-bottom: 1px solid #e4e4e4;padding-bottom: 1em;}
.entry .meta {position: absolute;right:15px;bottom:10px; margin:0; padding:0;text-align: right; border-bottom: none;}
.meta a{color:#999999;text-decoration: none;}
.meta p,
.meta p span,
.meta time {display:inline; font-size:1em; color:#999999;margin:0;}
.meta .morelink,
.meta .commentlink{float:right;height:20px;margin-left:20px; padding:0 5px;position:relative;background-color:rgba(248,248,248,1);}
.meta .morelink a,
.meta .commentlink a{position:relative;display:block;height:20px;}
.meta .morelink a:after,
.meta .commentlink a:after{position: absolute;right: -25px;top: 0px;border:10px solid transparent;content: " ";height: 0;width: 0;pointer-events: none;border-left-color: rgba(248,248,248,1);}
.meta .morelink:hover,
.meta .commentlink:hover{background-color:rgba(255,119,0,1);}
.meta .morelink:hover a,
.meta .commentlink:hover a{color:#FFFFFF;}
.meta .morelink:hover a:after,
.meta .commentlink:hover a:after{border-left-color: rgba(255,119,0,1);}

/* box shadow*/
article{}
